<template>
	<div class="exam-detail">
		<AppHeader :title="workDetails.homework_resources_name" titleColor="#FFF"
			backgroundColor="linear-gradient(to bottom,#09A3F9,#06AAEE)" @leftClickEvent="handleHeaderLeft()">
			<template #left>
				<img src="@/assets/images/icon-arrow-left-white.png" width="9" height="18" />
			</template>
		</AppHeader>
		<div class="score-mine">{{ workDetails.score }}</div>
		<div class="score-rate">得分率 {{ workDetails.score_rate }}</div>
		<div class="score-detail">
			<div class="score-item">
				<div class="score-top">
					<b class="highlight-green">{{ workDetails.score_class_high?.split("/")[0] }}</b>/{{
            workDetails.score_class_high?.split("/")[1] }}
				</div>
				<div class="score-bottom">班级最高分</div>
			</div>
			<div class="score-item">
				<div class="score-top">
					<b class="highlight-green">{{
            workDetails.score_class_average?.split("/")[0]
          }}</b>/{{ workDetails.score_class_average?.split("/")[1] }}
				</div>
				<div class="score-bottom">班级平均分</div>
			</div>
			<div class="score-item">
				<div class="score-top highlight-green">{{ workDetails.complete_num }}</div>
				<div class="score-bottom">完成人数</div>
			</div>
		</div>

		<div class="score-table">
			<div class="table-title">分数段分析</div>
			<div class="charts-box">
				<qiun-vue-ucharts type="column" :ontap="false" :opts="options" :chartData="chartData" />
			</div>
			<div class="total-item">
				<div class="score-name">总分</div>
				<div class="score-value highlight-green">{{ workDetails.full_score }}分</div>
			</div>
			<van-divider :style="{ borderColor: '#E5E5E5', margin: '15px 0' }" />
			<div class="total-item">
				<div class="score-name">作答用时</div>
				<div class="score-value">{{ workDetails.use_time }}</div>
			</div>
		</div>

		<div class="score-details">
			<!-- 	<div class="result-list">
				<div class="item" v-for="(item, i) in resultlist" :key="i">
					<img v-if="i === 0" src="@/assets/images/written/right.png" width="23" height="16" />
					<img v-if="i === 1" src="@/assets/images/written/error.png" width="18" height="18" />
					<img v-if="i === 2" src="@/assets/images/written/halfRight.png" width="26" height="16" />
					<img v-if="i === 3" src="@/assets/images/written/unknown.png" width="12" height="18" />
					<div class="t0">{{ item.name }}</div>
					<div class="t1">{{ item.num }} </div>
				</div>
			</div> -->

			<div class="main">
				<van-collapse v-model="activeNames">
					<van-collapse-item :name="index" v-for="(item,index) in listeningList" :key="index">
						<template #title>
							<div class="titleleft">
								{{ item.templateSettings.content }}
								（<span>
									<i
										:class="autoScoreColor(questionStemScoreMy(item),questionStemScore(item))">{{ questionStemScoreMy(item) }}分</i>
									/{{questionStemScore(item) }}分）
								</span>
							</div>
						</template>
						<div class="questionsBox">
							<div v-if="item.questions[0].type==5">
								<div v-for="ctItem in item.questions[0].trunk.body.split('\n')" style="margin: 10px 0;">
									{{ctItem}}
								</div>
							</div>
							<div v-if="item.questions[0].type==5" style="border-bottom: 2px solid #f7f7f7;">
								<audioPlayer :audioSrc="resmainUrl + item.questions[0].trunk.attachments[0].url">
								</audioPlayer>
							</div>
							<div :class="childIndex!=(item.questions[0].children.length-1)?'questionsItem borderBottom':'questionsItem'"
								v-for="(childItem,childIndex) in item.questions[0].children" :key="childIndex">
								<div style="margin: 10px 0;padding: 0 10px;" :class="childItem.select==null?'red':''"
									v-if="item.questions[0].type!=3">
									{{childItem.select!=null?optionsMap[childItem.select]:'未作答'}}
									( <span
										:class="childItem.questionRefSorce?'green':'red'">{{childItem.questionRefSorce}}分</span>
									/{{childItem.score}}分)
								</div>
								<div style="margin: 10px 0;padding: 0 10px;">{{childItem.trunk.body}}</div>
								<div v-if="item.questions[0].type==3">
									<div v-for="(optionItem,optionIndex) in childItem.options"
										style="padding: 10px 0px;">
										{{optionItem.sort}}.<span
											style="padding: 5px;border-bottom: 1px solid #bdb9b8;">{{(optionIndex+1)}}</span>
									</div>
								</div>
								<div v-for="(attItem,attIndex) in childItem.trunk.attachments">
									<div v-if="attItem.fileType==2">
										<audioPlayer :audioSrc="resmainUrl + attItem.url"></audioPlayer>
									</div>
									<div v-if="attItem.fileType==1">
										<img :src="resmainUrl + attItem.url" style="width: 100%;" />
									</div>
								</div>
								<div v-for="(optionItem,optionIndex) in childItem.options" style="padding: 0 10px;">
									<div style="display: flex;align-items: center;margin-bottom: 20px;margin-top: 20px;"
										v-if="item.questions[0].type!=3">
										<div :class="childItem.select == optionIndex?'select active':'select'">
											{{ optionsMap[optionIndex] }}
										</div>
										<span v-if="optionItem.value[0].body">{{ optionItem.value[0].body }}</span>
									</div>
									<div style="padding:10px 0;border-top: 2px solid #f7f7f7;"
										v-if="item.questions[0].type==3">
										<div style="margin: 10px 0;" :class="optionItem.write==null?'red':''">
											{{optionItem.write!=null?optionItem.write:'未作答'}}
											<span v-if="optionItem.write!=null">
												( <span
													:class="optionItem.questionRefSorce?'green':'red'">{{optionItem.questionRefSorce}}分</span>
												/{{optionItem.score}}分)
											</span>
										</div>
										<div>
											<div>参考答案</div>
											<div class="green" style="margin-top: 4px;">{{referenceAnswer(optionItem)}}
											</div>
										</div>
										<!-- <span v-if="optionItem.write">{{ optionItem.write }}</span> -->
									</div>

									<img v-if="!optionItem.value[0].body"
										:src="resmainUrl + optionItem.value[0].attachments[0].url"
										style="width: 60px;height: 60px;margin-top: 10px;" />
								</div>
								<div v-if="item.questions[0].type!=3">参考答案</div>
								<div class="green" v-if="item.questions[0].type!=3">{{optionsMap[childItem.answer]}}
								</div>
							</div>
						</div>
					</van-collapse-item>

				</van-collapse>

			</div>

		</div>

	</div>
	<AppLoading v-if="loading.page" />
</template>

<script setup>
	import {
		onMounted,
		onUnmounted,
		toRefs,
		computed,
		reactive,
		ref
	} from "vue";
	import {
		useRoute,
		useRouter
	} from "vue-router";
	import {
		showToast,
		Divider
	} from "vant";
	import qiunVueUcharts from "@qiun/vue-ucharts";
	import {
		request
	} from "@/api/request.js";
	import AppHeader from "@/components/AppHeader.vue";
	import audioPlayer from "@/components/audioPlayer/index.vue";
	import AppLoading from "@/components/AppLoading.vue";

	const route = useRoute();
	const router = useRouter();
	const {
		id,
		versionId,
		mission_type
	} = route.query;
	const dataList = ref([])

	const score = ref([])
	const state = reactive({
		loading: {
			page: false,
		},
		workDetails: {},
		chartData: {},
		options: {},
	});
	const activeNames = ref([])
	const listeningList = ref([])
	const resmainUrl = ref('https://d-xueer.bigchun.com/file/listening/res/')
	const optionsMap = ["A", "B", "C", "D", "E", "F", "G"]; //题目选项映射

	const handleHeaderLeft = () => {
		router.go(-1);
	};
	//格式化参考答案
	const referenceAnswer = (item) => {
		try {
			// 尝试将字符串解析为JSON数组  
			const parsed = JSON.parse(item.value[0].body);
			// 如果解析成功且是数组，则返回该数组  
			if (Array.isArray(parsed)) {
				return parsed.join("/");
			}
			return item.value[0].body;
		} catch (e) {
			// 如果解析失败（即不是有效的JSON），将原始字符串返回  
			return item.value[0].body;
		}
	}

	const questionStemScore = (item) => {
		let sumScore = 0
		for (var i = 0; i < item.questions[0].children.length; i++) {
			sumScore += item.questions[0].children[i].score
		}
		return sumScore.toFixed(2)
	}
	const questionStemScoreMy = (item) => {
		let sumScore = 0
		for (var i = 0; i < item.questions[0].children.length; i++) {
			sumScore += item.questions[0].children[i].questionRefSorce
		}
		return sumScore.toFixed(2)
	}

	const autoScoreColor = (my, all) => {
		if (my == all) {
			return 'green'
		} else {
			return 'red'
		}
	}

	const resultlist = [{
			id: 1,
			name: "已做对",
			num: '0'
		},
		{
			id: 2,
			name: "已做错",
			num: '0'
		},
		{
			id: 3,
			name: "已半对",
			num: '0'
		},
		{
			id: 4,
			name: "已半对",
			num: '0'
		}
	];

	const fetchHomeworkData = ({
		id,
		versionId,
		mission_type
	}) => {
		request({
				url: "/api/homework/getStudentHomeworkListEveryStatistics",
				method: "post",
			}, {
				data: {
					homeworkid: id,
					versionId,
					mission_type,
				},
			})
			.then((res) => {
				if (res && +res.code === 1 && res.data) {
					const {
						score_arr,
						...data
					} = res.data;
					listeningList.value = data.json
					const scoreMax = Object.values(score_arr).sort((a, b) => b - a)[0];
					const yAxisMax = (5 - scoreMax % 5) + scoreMax;
					const chartParams = {
						categories: Object.keys(score_arr),
						series: [{
							name: "人数",
							data: Object.values(score_arr),
							color: "#0CB76C",
						}, ],
					};
					state.workDetails = data
					state.chartData = chartParams;
					state.options = {
						padding: [30, 15, 15, 5],
						legend: {
							show: false,
						},
						xAxis: {
							disableGrid: true,
							rotateLabel: true,
						},
						yAxis: {
							showTitle: true,
							data: [{
								min: 0,
								max: yAxisMax,
								title: "人数",
								titleOffsetX: -10,
								titleOffsetY: -10,
							}, ],
						},
						extra: {
							column: {
								type: "group",
								width: 12,
								activeBgColor: "#000000",
								activeBgOpacity: 0.08,
							},
						},
						ontap: false,
					};


				} else {
					showToast(res.msg);
				}
			})
			.catch((e) => {
				showToast(e.msg || (e.body && e.body.msg));
			})
			.finally(() => {
				state.loading.page = false;
			});
	};
	onMounted(() => {
		state.loading.page = true;
		fetchHomeworkData({
			id,
			versionId,
			mission_type,
		});
	});

	const {
		loading,
		workDetails,
		chartData,
		options
	} = toRefs(state);
</script>

<style lang="scss" scoped>
	.exam-detail {
		width: 100%;
		height: 100%;
		background-image: url(../../assets/images/detail-banner.png);
		background-repeat: no-repeat;
		background-size: 375px 377px;
		background-position: top center;
		background-color: #f5f5f5;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 10px;
		box-sizing: border-box;
		overflow: auto;
	}

	.score-mine {
		font-weight: 500;
		font-size: 66px;
		color: #ffffff;
		line-height: 92px;
		font-style: normal;
		margin-top: 118px;
		margin-bottom: 5px;
	}

	.score-rate {
		font-size: 18px;
		color: #ffffff;
		line-height: 25px;
	}

	.score-detail {
		margin-top: 33px;
		width: 355px;
		height: 104px;
		background: rgba(255, 255, 255, 0.6);
		border-radius: 15px 15px 0px 0px;
		display: flex;
		justify-content: space-evenly;
	}

	.score-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		padding: 20px 0;
		box-sizing: border-box;
	}

	.score-top {
		font-weight: 500;
		font-size: 24px;
		color: #8e8e8e;
		line-height: 40px;
		font-style: normal;
		margin-bottom: 7px;
	}

	.score-bottom {
		font-weight: 500;
		font-size: 12px;
		color: #8e8e8e;
		line-height: 17px;
		font-style: normal;
	}

	.score-table {
		width: 355px;
		background: #ffffff;
		border-radius: 15px;
		padding: 10px;
		box-sizing: border-box;
		margin-top: 10px;
		margin-bottom: 10px;
	}

	.table-title {
		font-weight: bold;
		font-size: 16px;
		color: #333333;
		line-height: 22px;
		font-style: normal;
	}

	.total-item {
		display: flex;
		justify-content: space-between;
	}

	.score-name {
		font-weight: 400;
		font-size: 16px;
		color: #333333;
		line-height: 22px;
		font-style: normal;
	}

	.score-value {
		font-weight: 500;
		font-size: 16px;
		color: #333333;
		line-height: 22px;
		font-style: normal;
	}

	.main {
		background-color: #fff;
		height: auto;
		border-radius: 15px;
		padding: 10px;
		padding-bottom: 20px;

		.audio {
			height: 20px;
			width: 100px;
		}
	}

	.charts-box {
		width: 337px;
		height: 255px;
	}

	.borderBottom {
		border-bottom: 2px solid #f7f7f7;
	}

	.red {
		color: #ec5054;
	}

	.green {
		color: #67c259;
	}

	.select {
		width: 30px;
		height: 30px;
		margin-right: 20px;
		text-align: center;
		line-height: 30px;
		background-color: #f0eceb;
		color: #bdb9b8;
		border-radius: 50%;
		font-size: 16px;
	}

	.active {
		background-color: #0cb76c;
		color: #ffffff;
	}






	.result-list {
		margin-bottom: 10px;
		font-size: 14px;
		padding: 20px 10px;
		border-radius: 15px;
		display: flex;
		border-bottom: 1px solid #E5E5E5;
		background-color: #ffffff;

		.item {
			flex: 1;
			text-align: center;

			.t0 {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 14px;
				color: #333333;
				line-height: 20px;
				font-style: normal;
				margin: 10px 0;
			}

			.t1 {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 14px;
				color: #333333;
				line-height: 20px;
				font-style: normal;
			}
		}
	}
</style>